<!DOCTYPE html>
<html lang="ko-KR">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>시작하기 | Vue.js</title>
    <meta name="generator" content="VuePress 1.7.1">
    <link href="static/css/css.css" rel="stylesheet">
    <link href="static/css/font-awesome.min.css" rel="stylesheet">
    <link rel="icon" href="static/picture/logo.png">
    <link rel="manifest" href="https://v3.ko.vuejs.org/manifest.json">
    <link rel="apple-touch-icon" href="https://v3.ko.vuejs.org/images/icons/apple-icon-152x152.png">
    <script src="https://player.vimeo.com/api/player.js"></script>
    <script src="static/js/72160148.js" defer="defer"></script>
    <meta name="description" content="프로그레시브 JavaScript 프레임워크">
    <meta name="theme-color" content="#3eaf7c">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="msapplication-TileImage" content="/images/icons/ms-icon-144x144.png">
    <meta name="msapplication-TileColor" content="#000000">
    
    <link rel="preload" href="static/css/0.styles.272e88f8.css" as="style"><link rel="preload" href="https://v3.ko.vuejs.org/assets/js/app.65092beb.js" as="script"><link rel="preload" href="https://v3.ko.vuejs.org/assets/js/11.cc09171a.js" as="script"><link rel="preload" href="https://v3.ko.vuejs.org/assets/js/113.e4f60a64.js" as="script"><link rel="preload" href="https://v3.ko.vuejs.org/assets/js/24.cf678de6.js" as="script"><link rel="preload" href="https://v3.ko.vuejs.org/assets/js/19.67341cf7.js" as="script"><link rel="preload" href="https://v3.ko.vuejs.org/assets/js/17.815dd40f.js" as="script"><link rel="preload" href="https://v3.ko.vuejs.org/assets/js/22.d9d3e29a.js" as="script"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/1.9613a816.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/100.69bbc4fa.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/101.b096875a.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/102.7cc42e67.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/103.4b782ccc.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/104.66bebaf9.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/105.67f04f04.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/106.2dd4da8b.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/107.e0ab319e.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/108.44700f0c.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/109.ade2a74c.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/110.ef43c403.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/111.661eb039.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/112.02181eb9.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/114.9719e8ff.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/115.befc2a9e.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/116.fd210087.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/117.f4d0f5c7.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/118.d879f9ae.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/119.a214f5ab.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/12.30a14df0.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/120.2a76e60c.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/121.c7ffc24c.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/122.9b3cb7da.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/123.18456a1c.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/124.e5eb7f0f.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/125.de124cf1.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/126.d02732f3.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/127.8aabaed6.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/128.248188ce.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/129.9fc573a8.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/13.d002da48.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/130.4fcd7cd4.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/131.32ea0459.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/132.92d3e77f.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/133.47b6c620.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/134.0070b721.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/135.2df511b8.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/136.52cbfb3d.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/137.e54af219.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/138.578ee331.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/139.4f1e313e.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/14.28a94efc.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/140.4a71c864.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/141.42512568.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/142.8e627a20.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/143.494bef22.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/144.adcc88d3.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/145.e9fbc788.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/146.3ae86117.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/147.96de24f1.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/148.9742056c.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/149.b9f264db.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/15.09781c39.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/150.8c1b2fd2.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/151.04f2a8c9.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/152.74b301a9.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/153.395dac2a.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/154.af391110.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/155.e68eb259.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/156.cfc43329.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/157.87114880.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/158.d60e0e29.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/159.aaf4b43d.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/16.c5a9ddc9.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/160.d10d0246.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/161.761b99af.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/162.8bc79336.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/163.9a3ef7cd.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/164.e35a465b.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/165.61e2c644.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/166.444e85d7.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/167.b9a4614d.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/168.f6cd4929.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/169.4b364791.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/170.1ec6415f.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/171.cf29d9ae.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/172.e559ec09.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/173.d1e2befb.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/174.fc91dc16.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/175.f31a9f57.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/176.e11784d7.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/177.3e1786ec.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/178.5842784f.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/179.eb050d0a.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/18.c5909eae.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/180.771aef6b.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/181.90ae3a06.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/182.44c9dbbe.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/183.76a25d4d.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/184.c58981b5.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/185.17154f46.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/186.17ccaed3.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/187.729e36b7.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/188.72b13e51.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/189.f2965983.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/190.73186a1b.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/191.15d3f9c0.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/192.2a5fd9a1.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/193.84af9cc7.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/194.e5adb2db.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/195.b5250e60.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/196.4efae780.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/197.7e7bdbe3.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/198.475b6a19.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/199.19b733f9.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/2.d340b672.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/20.ce4027b0.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/200.c0133636.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/201.2a9ddd30.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/202.fb73de5e.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/203.e7a3f2d3.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/204.5efb38aa.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/205.26131476.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/206.e0cf765f.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/207.b3576133.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/208.2bd0c658.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/209.da83440a.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/21.2a679bdc.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/210.95a5bf98.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/211.f27bb62d.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/212.be03b3b3.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/213.fb4fa312.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/214.54f15403.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/215.63c9eeb3.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/216.8f7ba7d6.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/217.424c5d31.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/218.97bd3fca.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/219.3687bf09.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/220.99adb831.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/221.0d9e0580.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/222.e9613b8d.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/223.3b8bcbec.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/224.b8eb7461.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/225.bcd909c4.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/226.91dd42a6.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/227.55e2ef6e.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/228.3193a93f.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/229.44c785c9.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/23.d3b7eeea.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/230.0e1f125d.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/231.883858b4.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/232.de94c27d.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/233.c9ba2a11.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/234.fa7230e9.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/235.f1f1319c.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/236.ef993470.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/237.3cd3b257.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/238.4b5957ba.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/239.3f4cd481.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/240.0e43251f.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/241.f9e0cb9a.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/242.925cca21.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/243.d58f0877.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/244.3ddc90fa.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/245.1a0cb772.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/246.7d0fc9e2.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/247.f2e5a44c.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/248.e5eec535.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/249.4e0c31d4.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/25.bd5c7a39.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/250.26707513.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/251.4deefc92.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/252.af5ce731.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/253.6897473a.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/254.162cb071.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/255.ea37296f.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/256.344b0954.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/257.03f0e734.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/258.062b2716.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/259.033fefa5.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/26.b541044a.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/260.aedf2fa8.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/261.92a05217.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/262.086cb8ad.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/263.4ecf7892.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/264.4c8afec4.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/265.746b0d60.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/266.e98419eb.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/267.cd57f03f.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/268.e2c79ca1.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/269.445dfc17.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/27.d9947256.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/270.eb9b7d3e.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/271.b124ab4d.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/272.aff22bf6.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/273.94c4b4eb.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/274.a65a83c1.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/275.00590beb.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/276.2275b172.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/277.621ac0c6.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/278.ac5ca006.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/279.5b428d58.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/28.ca006f52.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/280.245e3232.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/281.ca7fbdcc.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/282.ec7eee6d.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/283.0e9fd3ea.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/284.0f59843b.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/285.50315f77.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/286.b4479560.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/287.021032f0.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/288.3bfb7576.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/289.3189b1bd.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/29.abd0fa07.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/290.95f47632.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/291.bfa2ca68.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/292.e4cc4d26.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/293.621259d8.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/294.c78c794c.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/295.3b043ddc.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/296.8f402f75.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/297.6d2de822.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/298.bcd3ace6.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/299.cb051538.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/3.65073286.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/30.6564e63d.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/300.ca34380a.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/301.97fe3954.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/302.e3169f4e.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/303.b83c64ca.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/304.809e0bc9.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/305.d82629fd.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/31.16d5b2ba.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/32.5839e6b5.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/33.8bb34858.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/34.43b5bf68.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/35.d76d6925.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/36.f844993f.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/37.ad4279ac.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/38.ab8ecf7b.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/39.1584b2dc.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/4.6ab8ad06.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/40.42a3fb40.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/41.c6e26eb5.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/42.555e0780.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/43.fc9f10b9.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/44.b0ab0733.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/45.90e2206d.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/46.9f825225.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/47.47c24c1c.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/48.e21e6a5a.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/49.98c82363.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/5.5957f147.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/50.4bfb2268.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/51.bde2f1cc.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/52.8fd9e88a.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/53.6a0b5241.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/54.4cb72a70.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/55.f4548912.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/56.f7ab785a.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/57.f6cdfb3e.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/58.8228be29.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/59.25907c47.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/6.afc2f0b4.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/60.5639fd79.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/61.34c64d3b.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/62.5d4dc83b.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/63.2c6187ca.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/64.ad1e9bee.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/65.696e576a.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/66.6640896f.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/67.cd716872.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/68.e8e86159.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/69.91d95252.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/7.0780ab64.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/70.0ab220e5.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/71.37e798f3.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/72.9bee2d38.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/73.f538fa15.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/74.97a3df43.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/75.2338c2fc.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/76.d69d155e.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/77.5ee8e3f3.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/78.9f25f950.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/79.c60d7c6c.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/80.ffe7e5d0.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/81.61c61feb.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/82.7611f029.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/83.7a78ce7a.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/84.e1349a57.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/85.b6e24b96.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/86.5056b56f.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/87.951f0e6d.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/88.3c8a0032.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/89.5d079e44.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/90.bef91643.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/91.b2917338.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/92.35aef40d.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/93.a578a85b.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/94.b099528a.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/95.2d560a00.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/96.eb77404c.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/97.7362166d.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/98.f4387ebd.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/99.1e023987.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/vendors~docsearch.948bcc75.js"><link rel="prefetch" href="https://v3.ko.vuejs.org/assets/js/vendors~search-page.517e27fd.js">
    <link rel="stylesheet" href="static/css/0.styles.272e88f8.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><!----> <header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewbox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="index13.html" class="home-link router-link-active"><img src="static/picture/logo.png" alt="Vue.js" class="logo"> <span class="site-name can-hide">Vue.js</span></a> <div class="links"><!----> <nav class="nav-links can-hide"><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="문서 메뉴" class="dropdown-title"><span class="title">문서</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="" aria-current="page" class="nav-link router-link-exact-active router-link-active">
  가이드
</a></li><li class="dropdown-item"><!----> <a href="javascript:;" class="nav-link">
  스타일 가이드
</a></li><li class="dropdown-item"><!----> <a href="javascript:;" class="nav-link">
  쿡북
</a></li><li class="dropdown-item"><!----> <a href="markdown1.html" class="nav-link">
  예제
</a></li><li class="dropdown-item"><!----> <a href="writing-guide1.html" class="nav-link">
  기여하기
</a></li><li class="dropdown-item"><!----> <a href="introduction5.html" class="nav-link">
  Vue 2에서 이전
</a></li></ul></div></div><div class="nav-item"><a href="javascript:;" class="nav-link">
  API 레퍼런스
</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="생태계" class="dropdown-title"><span class="title">생태계</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>
          커뮤니티
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="javascript:;" class="nav-link">
  팀
</a></li><li class="dropdown-subitem"><a href="partners2.html" class="nav-link">
  파트너
</a></li><li class="dropdown-subitem"><a href="javascript:;" class="nav-link">
  참여하기
</a></li><li class="dropdown-subitem"><a href="javascript:;" class="nav-link">
  테마
</a></li></ul></li><li class="dropdown-item"><h4>
          공식 프로젝트
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="index4.html" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Vue Router
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="index5.html" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Vuex
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="index6.html" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Vue CLI
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="javascript:;" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Vue Test Utils
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="javascript:;" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Devtools
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="index9.html" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Weekly news
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="Vue 후원하기" class="dropdown-title"><span class="title">Vue 후원하기</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="javascript:;" class="nav-link">
  1회성 기부
</a></li><li class="dropdown-item"><!----> <a href="javascript:;" class="nav-link">
  Recurring Pledges
</a></li><li class="dropdown-item"><!----> <a href="javascript:;" target="_blank" rel="noopener noreferrer" class="nav-link external">
  티셔츠샵
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></div></div> <!----></nav> <div id="docsearch"></div></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="문서 메뉴" class="dropdown-title"><span class="title">문서</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="" aria-current="page" class="nav-link router-link-exact-active router-link-active">
  가이드
</a></li><li class="dropdown-item"><!----> <a href="javascript:;" class="nav-link">
  스타일 가이드
</a></li><li class="dropdown-item"><!----> <a href="javascript:;" class="nav-link">
  쿡북
</a></li><li class="dropdown-item"><!----> <a href="markdown1.html" class="nav-link">
  예제
</a></li><li class="dropdown-item"><!----> <a href="writing-guide1.html" class="nav-link">
  기여하기
</a></li><li class="dropdown-item"><!----> <a href="introduction5.html" class="nav-link">
  Vue 2에서 이전
</a></li></ul></div></div><div class="nav-item"><a href="javascript:;" class="nav-link">
  API 레퍼런스
</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="생태계" class="dropdown-title"><span class="title">생태계</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>
          커뮤니티
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="javascript:;" class="nav-link">
  팀
</a></li><li class="dropdown-subitem"><a href="partners2.html" class="nav-link">
  파트너
</a></li><li class="dropdown-subitem"><a href="javascript:;" class="nav-link">
  참여하기
</a></li><li class="dropdown-subitem"><a href="javascript:;" class="nav-link">
  테마
</a></li></ul></li><li class="dropdown-item"><h4>
          공식 프로젝트
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="index4.html" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Vue Router
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="index5.html" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Vuex
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="index6.html" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Vue CLI
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="javascript:;" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Vue Test Utils
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="javascript:;" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Devtools
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="index9.html" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Weekly news
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="Vue 후원하기" class="dropdown-title"><span class="title">Vue 후원하기</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="javascript:;" class="nav-link">
  1회성 기부
</a></li><li class="dropdown-item"><!----> <a href="javascript:;" class="nav-link">
  Recurring Pledges
</a></li><li class="dropdown-item"><!----> <a href="javascript:;" target="_blank" rel="noopener noreferrer" class="nav-link external">
  티셔츠샵
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></div></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>필수요소</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="javascript:;" class="sidebar-link">설치방법</a></li><li><a href="" aria-current="page" class="active sidebar-link">시작하기</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="#vue-js가-무엇인가요" class="sidebar-link">Vue.js가 무엇인가요?</a></li><li class="sidebar-sub-header"><a href="#시작하기-2" class="sidebar-link">시작하기</a></li><li class="sidebar-sub-header"><a href="#선언적-렌더링-declarative-rendering" class="sidebar-link">선언적 렌더링(Declarative Rendering)</a></li><li class="sidebar-sub-header"><a href="#사용자-입력-핸들링" class="sidebar-link">사용자 입력 핸들링</a></li><li class="sidebar-sub-header"><a href="#조건문과-반복문" class="sidebar-link">조건문과 반복문</a></li><li class="sidebar-sub-header"><a href="#컴포넌트로-조립하기" class="sidebar-link">컴포넌트로 조립하기</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="#사용자-정의-엘리먼트와의-관계" class="sidebar-link">사용자 정의 엘리먼트와의 관계</a></li></ul></li><li class="sidebar-sub-header"><a href="#더-하실-준비가-되셨나요" class="sidebar-link">더 하실 준비가 되셨나요?</a></li></ul></li><li><a href="javascript:;" class="sidebar-link">어플리케이션 &amp; 컴포넌트 인스턴스</a></li><li><a href="javascript:;" class="sidebar-link">템플릿 문법</a></li><li><a href="javascript:;" class="sidebar-link">Data 속성과 Methods</a></li><li><a href="javascript:;" class="sidebar-link">Computed 속성과 Watch</a></li><li><a href="javascript:;" class="sidebar-link">클래스와 스타일 바인딩</a></li><li><a href="javascript:;" class="sidebar-link">조건부 렌더링</a></li><li><a href="javascript:;" class="sidebar-link">리스트 렌더링</a></li><li><a href="javascript:;" class="sidebar-link">이벤트 핸들링</a></li><li><a href="javascript:;" class="sidebar-link">폼 입력 바인딩</a></li><li><a href="javascript:;" class="sidebar-link">컴포넌트 기초</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>컴포넌트 톺아보기</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="javascript:;" class="sidebar-link">컴포넌트 등록</a></li><li><a href="javascript:;" class="sidebar-link">Props</a></li><li><a href="javascript:;" class="sidebar-link">Non-Prop 속성</a></li><li><a href="javascript:;" class="sidebar-link">커스텀 이벤트</a></li><li><a href="javascript:;" class="sidebar-link">Slots</a></li><li><a href="javascript:;" class="sidebar-link">Provide / inject</a></li><li><a href="javascript:;" class="sidebar-link">동적 &amp; 비동기 컴포넌트</a></li><li><a href="javascript:;" class="sidebar-link">템플릿 refs</a></li><li><a href="javascript:;" class="sidebar-link">예외적인 상황들</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>트랜지션 &amp; 애니메이션</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="javascript:;" class="sidebar-link">개요</a></li><li><a href="javascript:;" class="sidebar-link">진입 / 진출 트랜지션</a></li><li><a href="javascript:;" class="sidebar-link">리스트 트랜지션</a></li><li><a href="javascript:;" class="sidebar-link">상태 트랜지션</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>재사용성 &amp; 컴포지션</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><section class="sidebar-group collapsable is-sub-group depth-1"><p class="sidebar-heading open"><span>컴포지션 API</span> <span class="arrow down"></span></p> <ul class="sidebar-links sidebar-group-items"><li><a href="javascript:;" class="sidebar-link">소개</a></li><li><a href="javascript:;" class="sidebar-link">Setup</a></li><li><a href="javascript:;" class="sidebar-link">라이프사이클 훅</a></li><li><a href="javascript:;" class="sidebar-link">Provide / Inject</a></li><li><a href="javascript:;" class="sidebar-link">템플릿 Refs</a></li></ul></section></li><li><a href="javascript:;" class="sidebar-link">믹스인</a></li><li><a href="javascript:;" class="sidebar-link">사용자 지정 디렉티브</a></li><li><a href="javascript:;" class="sidebar-link">Teleport</a></li><li><a href="javascript:;" class="sidebar-link">Render 함수</a></li><li><a href="javascript:;" class="sidebar-link">플러그인</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>고급 가이드</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><section class="sidebar-group collapsable is-sub-group depth-1"><p class="sidebar-heading open"><span>반응성(Reactivity)</span> <span class="arrow down"></span></p> <ul class="sidebar-links sidebar-group-items"><li><a href="javascript:;" class="sidebar-link">깊은 반응성</a></li><li><a href="javascript:;" class="sidebar-link">반응형(Reactivity) 기초</a></li><li><a href="javascript:;" class="sidebar-link">Computed 와 Watch</a></li></ul></section></li><li><a href="javascript:;" class="sidebar-link">렌더링 메커니즘 및 최적화</a></li><li><a href="javascript:;" class="sidebar-link">Vue 2의 변경 감지 주의사항</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>도구</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="javascript:;" class="sidebar-link">싱글 파일 컴포넌트</a></li><li><a href="javascript:;" class="sidebar-link">테스팅</a></li><li><a href="javascript:;" class="sidebar-link">TypeScript 지원</a></li><li><a href="javascript:;" class="sidebar-link">모바일</a></li><li><a href="javascript:;" class="sidebar-link">운영 배포</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>스케일 업</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="javascript:;" class="sidebar-link">라우팅</a></li><li><a href="javascript:;" class="sidebar-link">상태 관리</a></li><li><a href="javascript:;" class="sidebar-link">서버 사이드 렌더링</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>접근성</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="javascript:;" class="sidebar-link">기초</a></li><li><a href="javascript:;" class="sidebar-link">Semantics</a></li><li><a href="javascript:;" class="sidebar-link">표준</a></li><li><a href="javascript:;" class="sidebar-link">자료</a></li></ul></section></li></ul> </aside> <main class="page"><!---->  <div class="theme-default-content content__default"><h1 id="시작하기"><a href="#시작하기" class="header-anchor">#</a> 시작하기</h1> <div class="custom-block tip"><p class="custom-block-title">NOTE</p> <p>이미 Vue 2를 알고 있고 Vue 3의 새로운 점을 배우고 싶으신가요? <a href="javascript:;">Migration Guide</a>를 확인하세요!</p></div> <h2 id="vue-js가-무엇인가요"><a href="#vue-js가-무엇인가요" class="header-anchor">#</a> Vue.js가 무엇인가요?</h2> <p>Vue(/vjuː/ 로 발음, <em><strong>view</strong></em> 와 발음이 같습니다.)는 사용자 인터페이스를 만들기 위한 <em><strong>프로그레시브 프레임워크</strong></em> 입니다. 다른 단일형 프레임워크와 달리 Vue는 점진적으로 채택할 수 있도록 설계하였습니다. 핵심 라이브러리는 뷰 레이어만 초점을 맞추어 다른 라이브러리나 기존 프로젝트와의 통합이 매우 쉽습니다. 그리고 Vue는  <a href="javascript:;">현대적 도구</a> 및  <a href="javascript:;" target="_blank" rel="noopener noreferrer">지원 라이브러리<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> 와 함께 사용한다면 정교한 단일 페이지 응용프로그램을 완벽하게 지원할 수 있습니다.</p> <p>vue에 대해 깊게 들어가기전에, 여러분에게 주요 원칙과 샘플을 제공하는 <a id="modal-player" href="#" class="vuemastery-trigger">비디오를 만들었으니</a> 한번 보시기 바랍니다.</p> <section class="video-lesson"><a href="javascript:;" target="_blank" rel="sponsored noopener" title="Watch a free video course on Vue Mastery">Watch a free video course on Vue Mastery</a></section> <h2 id="시작하기-2"><a href="#시작하기-2" class="header-anchor">#</a> 시작하기</h2> <p><actionlink url="installation.html" class="primary">     설치   </actionlink></p> <div class="custom-block tip"><p class="custom-block-title">TIP</p> <p>공식 가이드는 HTML, CSS 및 JavaScript에 대한 중간 수준의 지식을 전제로 하고 있습니다. 이제 막 프론트 엔드 개발에 대해 배우기 시작했다면 첫 번째 단계로 프레임워크를 시작하는 것은 좋은 생각이 아닙니다. 기본을 파악한 다음 다시 해보세요! 다른 프레임워크에 대한 사전 경험이 도움될 수 있지만 반드시 필요한것은 아닙니다.</p></div> <p>Vue.js를 사용해 볼 수 있는 가장 쉬운 방법은  <a href="javascript:;" target="_blank" rel="noopener noreferrer">Hello World 예제<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>를 사용하는 것입니다. 브라우저의 새 탭에서 열어 본 후 몇 가지 기본 예제를 따라가십시오.</p> <p><a href="javascript:;">설치</a> 페이지에는 Vue를 설치하기 위한 옵션이 추가로 제공됩니다. 특히 Node.js 기반 빌드 도구에 아직 익숙하지 않으면 <code>vue-cli</code> 로 시작하는 것을 권장하지 않습니다.</p> <h2 id="선언적-렌더링-declarative-rendering"><a href="#선언적-렌더링-declarative-rendering" class="header-anchor">#</a> 선언적 렌더링(Declarative Rendering)</h2> <p>Vue.js의 핵심에는 간단한 템플릿 구문을 사용하여 DOM에서 데이터를 선언적으로 렌더링 할 수있는 시스템이 있습니다.</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>counter<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
  Counter: {{ counter }}
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">const</span> Counter <span class="token operator">=</span> <span class="token punctuation">{</span>
  <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token punctuation">{</span>
      counter<span class="token operator">:</span> <span class="token number">0</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

Vue<span class="token punctuation">.</span><span class="token function">createApp</span><span class="token punctuation">(</span>Counter<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">mount</span><span class="token punctuation">(</span><span class="token string">'#counter'</span><span class="token punctuation">)</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><p>첫 Vue app을 만들었습니다! 이것은 문자열 템플릿을 렌더링하는 것과 매우 유사하지만, Vue.JS 내부에서는 더 많은 작업을 하고 있습니다. 이제 데이터와 DOM이 연결되었으며 모든 것이 <em><strong>반응형(reactive)</strong></em> 이 되었습니다. 우리는 그것을 어떻게 확인할 수 있을까요? 아래 예제 코드에서 <code>counter</code> 속성은 매 초마다 증가하고 우리는 DOM이 변경될때 어떻게 렌더 되는지 볼 수 있습니다.</p> <div class="language-js line-numbers-mode"><div class="highlight-lines"><br><br><br><br><br><br><br><div class="highlighted"> </div><div class="highlighted"> </div><div class="highlighted"> </div><br><br><br></div><pre class="language-js"><code><span class="token keyword">const</span> CounterApp <span class="token operator">=</span> <span class="token punctuation">{</span>
  <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token punctuation">{</span>
      counter<span class="token operator">:</span> <span class="token number">0</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token function">mounted</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token function">setInterval</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
      <span class="token keyword">this</span><span class="token punctuation">.</span>counter<span class="token operator">++</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">1000</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br></div></div><div class="demo" data-v-276250da=""><p data-v-276250da="">Counter: 0</p> <button data-v-276250da="">Stop timer</button></div> <p>텍스트 보간 이외에도 다음과 같은 엘리먼트 속성을 바인딩할 수 있습니다.</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>bind-attribute<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name"><span class="token namespace">v-bind:</span>title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>message<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    여기에 마우스를 올려두고 잠시 기다리면 제목이 동적으로 바뀝니다!
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">const</span> AttributeBinding <span class="token operator">=</span> <span class="token punctuation">{</span>
  <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token punctuation">{</span>
      message<span class="token operator">:</span> <span class="token string">'이 페이지를 다음 시간에 열었습니다. '</span> <span class="token operator">+</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toLocaleString</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

Vue<span class="token punctuation">.</span><span class="token function">createApp</span><span class="token punctuation">(</span>AttributeBinding<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">mount</span><span class="token punctuation">(</span><span class="token string">'#bind-attribute'</span><span class="token punctuation">)</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><p data-theme-id="39028" data-preview="true" data-editable="true" data-height="300" data-default-tab="result" data-user="Vue" data-slug-hash="KKpRVvJ" data-pen-title="Attribute dynamic binding" class="codepen" style="height:300px;"><span>See the Pen <a href="javascript:;">Attribute dynamic binding</a>
  by Vue (<a href="javascript:;">@Vue</a>)
  on <a href="javascript:;">CodePen</a>.</span></p> <p>여기서 우리는 새로운 것을 만났습니다. <code>v-bind</code> 속성은 <em><strong>디렉티브</strong></em> 이라고 합니다. 디렉티브는 Vue에서 제공하는 특수 속성임을 나타내는 <code>v-</code> 접두어가 붙어있으며 사용자가 짐작할 수 있듯 렌더링 된 DOM에 특수한 반응형 동작을 합니다. 기본적으로 “이 요소의 <code>title</code>  속성을 Vue 인스턴스의 <code>message</code> 프로퍼티로 최신 상태를 유지 합니다.”</p> <h2 id="사용자-입력-핸들링"><a href="#사용자-입력-핸들링" class="header-anchor">#</a> 사용자 입력 핸들링</h2> <p>사용자가 앱과 상호 작용할 수 있게 하기 위해 우리는 <code>v-on</code> 디렉티브를 사용하여 Vue 인스턴스에서 메소드를 호출하는 이벤트 리스너를 추가 할 수 있습니다 :</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>event-handling<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>{{ message }}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name"><span class="token namespace">v-on:</span>click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>reverseMessage<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Reverse Message<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">const</span> EventHandling <span class="token operator">=</span> <span class="token punctuation">{</span>
  <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token punctuation">{</span>
      message<span class="token operator">:</span> <span class="token string">'Hello Vue.js!'</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  methods<span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token function">reverseMessage</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">this</span><span class="token punctuation">.</span>message <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>message
        <span class="token punctuation">.</span><span class="token function">split</span><span class="token punctuation">(</span><span class="token string">''</span><span class="token punctuation">)</span>
        <span class="token punctuation">.</span><span class="token function">reverse</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
        <span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span><span class="token string">''</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

Vue<span class="token punctuation">.</span><span class="token function">createApp</span><span class="token punctuation">(</span>EventHandling<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">mount</span><span class="token punctuation">(</span><span class="token string">'#event-handling'</span><span class="token punctuation">)</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br></div></div><p data-theme-id="39028" data-preview="true" data-editable="true" data-height="300" data-default-tab="result" data-user="Vue" data-slug-hash="dyoeGjW" data-pen-title="Event handling" class="codepen" style="height:300px;"><span>See the Pen <a href="javascript:;">Event handling</a>
  by Vue (<a href="javascript:;">@Vue</a>)
  on <a href="javascript:;">CodePen</a>.</span></p> <p>이 방법은 직접적으로 DOM을 건드리지 않고 앱의 상태만을 업데이트합니다. 모든 DOM 조작은 Vue에 의해 처리되며 작성한 코드는 기본 로직에만 초점을 맞춥니다.</p> <p>Vue는 또한 양식에 대한 입력과 앱 상태를 양방향으로 바인딩하는<code>v-model</code> 디렉티브를 제공합니다.</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>two-way-binding<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>{{ message }}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>message<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">const</span> TwoWayBinding <span class="token operator">=</span> <span class="token punctuation">{</span>
  <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token punctuation">{</span>
      message<span class="token operator">:</span> <span class="token string">'Hello Vue!'</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

Vue<span class="token punctuation">.</span><span class="token function">createApp</span><span class="token punctuation">(</span>TwoWayBinding<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">mount</span><span class="token punctuation">(</span><span class="token string">'#two-way-binding'</span><span class="token punctuation">)</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><p data-theme-id="39028" data-preview="true" data-editable="true" data-height="300" data-default-tab="result" data-user="Vue" data-slug-hash="poJVgZm" data-pen-title="Two-way binding" class="codepen" style="height:300px;"><span>See the Pen <a href="javascript:;">Two-way binding</a>
  by Vue (<a href="javascript:;">@Vue</a>)
  on <a href="javascript:;">CodePen</a>.</span></p> <h2 id="조건문과-반복문"><a href="#조건문과-반복문" class="header-anchor">#</a> 조건문과 반복문</h2> <p>엘리먼트가 표시되는지에 대한 여부를 제어하는 것은 아주 간단합니다.</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>conditional-rendering<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">v-if</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>seen<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>이제 나를 볼수 있어요<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">const</span> ConditionalRendering <span class="token operator">=</span> <span class="token punctuation">{</span>
  <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token punctuation">{</span>
      seen<span class="token operator">:</span> <span class="token boolean">true</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

Vue<span class="token punctuation">.</span><span class="token function">createApp</span><span class="token punctuation">(</span>ConditionalRendering<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">mount</span><span class="token punctuation">(</span><span class="token string">'#conditional-rendering'</span><span class="token punctuation">)</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><p>이 예제는 텍스트와 속성뿐 아니라 DOM의 <em><strong>구조</strong></em> 에도 데이터를 바인딩 할 수 있음을 보여줍니다. 또한 Vue 엘리먼트가 Vue에 삽입/업데이트/제거될 때 자동으로 <a href="javascript:;">전환 효과(transition effects)</a> 를 적용되는 강력한 전환 효과 시스템을 제공합니다.</p> <p>우리는 효과를 확인하기 위해서 위 코드 블록의 <code>seen</code> 을 <code>true</code>에서 <code>false</code>로 바꿀 수 있습니다.</p> <p data-theme-id="39028" data-preview="true" data-editable="true" data-height="300" data-default-tab="js,result" data-user="Vue" data-slug-hash="oNXdbpB" data-pen-title="Conditional rendering" class="codepen" style="height:300px;"><span>See the Pen <a href="javascript:;">Conditional rendering</a>
  by Vue (<a href="javascript:;">@Vue</a>)
  on <a href="javascript:;">CodePen</a>.</span></p> <p>Vue에서 제공하는 특별한 기능을 제공하는 디렉티브들이 있습니다. 예를 들어 <code>v-for</code> 디렉티브는 배열에서 데이터를 가져와 아이템 목록을 표시하는데 사용할수 있습니다.</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>list-rendering<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ol</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span> <span class="token attr-name">v-for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>todo in todos<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
      {{ todo.text }}
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ol</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">const</span> ListRendering <span class="token operator">=</span> <span class="token punctuation">{</span>
  <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token punctuation">{</span>
      todos<span class="token operator">:</span> <span class="token punctuation">[</span>
        <span class="token punctuation">{</span> text<span class="token operator">:</span> <span class="token string">'Learn JavaScript'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token punctuation">{</span> text<span class="token operator">:</span> <span class="token string">'Learn Vue'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token punctuation">{</span> text<span class="token operator">:</span> <span class="token string">'Build something awesome'</span> <span class="token punctuation">}</span>
      <span class="token punctuation">]</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

Vue<span class="token punctuation">.</span><span class="token function">createApp</span><span class="token punctuation">(</span>ListRendering<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">mount</span><span class="token punctuation">(</span><span class="token string">'#list-rendering'</span><span class="token punctuation">)</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br></div></div><p data-theme-id="39028" data-preview="true" data-editable="true" data-height="300" data-default-tab="result" data-user="Vue" data-slug-hash="mdJLVXq" data-pen-title="List rendering" class="codepen" style="height:300px;"><span>See the Pen <a href="javascript:;">List rendering</a>
  by Vue (<a href="javascript:;">@Vue</a>)
  on <a href="javascript:;">CodePen</a>.</span></p> <h2 id="컴포넌트로-조립하기"><a href="#컴포넌트로-조립하기" class="header-anchor">#</a> 컴포넌트로 조립하기</h2> <p>컴포넌트 시스템은 Vue의 또 다른 중요한 개념입니다. 이는 작고 독립적이며 재사용할 수 있는 컴포넌트로 구성된 대규모 애플리케이션을 구축할 수 있게 해주는 추상적 개념입니다. 생각해보면 거의 모든 유형의 애플리케이션 인터페이스를 컴포넌트 트리로 추상화할 수 있습니다.</p> <p><img src="static/picture/components.png" alt="컴포넌트 트리"></p> <p>Vue에서 컴포넌트는 미리 정의된 옵션을 가진 Vue 인스턴스 입니다. Vue에서 컴포넌트를 등록하는 방법은 간단합니다. <code>App</code> 객체에서 했던 것처럼 우리는 컴포넌트 객체를 만들고 부모 컴포넌트의 <code>components</code>  (마지막 복수형에 주의) 옵션에 정의할 수 있습니다.</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// 뷰 어플리케이션을 생성합니다.</span>
<span class="token keyword">const</span> app <span class="token operator">=</span> Vue<span class="token punctuation">.</span><span class="token function">createApp</span><span class="token punctuation">(</span><span class="token operator">...</span><span class="token punctuation">)</span>

<span class="token comment">// todo-item 란 이름의 새로운 컴포넌트를 선언합니다.</span>
app<span class="token punctuation">.</span><span class="token function">component</span><span class="token punctuation">(</span><span class="token string">'todo-item'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
  template<span class="token operator">:</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">&lt;li&gt;할일이 있어요&lt;/li&gt;</span><span class="token template-punctuation string">`</span></span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>

<span class="token comment">// 어플리케이션을 마운트 합니다.</span>
app<span class="token punctuation">.</span><span class="token function">mount</span><span class="token punctuation">(</span><span class="token operator">...</span><span class="token punctuation">)</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><p>이제 다른 컴포넌트의 템플릿에서 이 컴포넌트을 이용해 조립할수 있습니다.</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ol</span><span class="token punctuation">&gt;</span></span>
  <span class="token comment">&lt;!-- todo-item 컴포넌트의 인스턴스를 만듭니다.  --&gt;</span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>todo-item</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>todo-item</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ol</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><p>그러나 이것은 todo-item 컴포넌트를 사용할 때마다 똑같은 텍스트를 렌더링할뿐 무언가가 부족합니다. 부모 영역의 데이터를 자식 컴포넌트에 전달할 수 있어야 합니다. <a href="javascript:;">prop</a> 을 전달받을 수 있도록 todo-item 컴포넌트의 정의를 수정해봅시다.</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>app<span class="token punctuation">.</span><span class="token function">component</span><span class="token punctuation">(</span><span class="token string">'todo-item'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
  props<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'todo'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
  template<span class="token operator">:</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string"><span class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">&gt;</span></span><span class="token interpolation"><span class="token punctuation">{{</span><span class="token inline-js language-js"> todo<span class="token punctuation">.</span>text </span><span class="token punctuation">}}</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span></span></span><span class="token template-punctuation string">`</span></span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><p>이제 <code>v-bind</code> 를 사용하여 할일을 개별  todo-item 컴포넌트에 전달할 수 있습니다.</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>todo-list-app<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ol</span><span class="token punctuation">&gt;</span></span>
    <span class="token comment">&lt;!--
      이제 할일 todo-item 에 할일을 전달합니다.
      콘텐츠는 동적으로 포현됩니다.
      여기에서 &quot;key&quot;를 또 전달하고 있는데
      이것에 대해서는 나중에 설명하겠습니다.
    --&gt;</span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>todo-item</span>
      <span class="token attr-name">v-for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>item in groceryList<span class="token punctuation">&quot;</span></span>
      <span class="token attr-name"><span class="token namespace">v-bind:</span>todo</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>item<span class="token punctuation">&quot;</span></span>
      <span class="token attr-name"><span class="token namespace">v-bind:</span>key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>item.id<span class="token punctuation">&quot;</span></span>
    <span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>todo-item</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ol</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br></div></div><div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">const</span> TodoList <span class="token operator">=</span> <span class="token punctuation">{</span>
  <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token punctuation">{</span>
      groceryList<span class="token operator">:</span> <span class="token punctuation">[</span>
        <span class="token punctuation">{</span> id<span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span> text<span class="token operator">:</span> <span class="token string">'야채'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token punctuation">{</span> id<span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span> text<span class="token operator">:</span> <span class="token string">'치즈'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token punctuation">{</span> id<span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span> text<span class="token operator">:</span> <span class="token string">'사람이 먹을수 있는거라면 뭐든지'</span> <span class="token punctuation">}</span>
      <span class="token punctuation">]</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

<span class="token keyword">const</span> app <span class="token operator">=</span> Vue<span class="token punctuation">.</span><span class="token function">createApp</span><span class="token punctuation">(</span>TodoList<span class="token punctuation">)</span>

app<span class="token punctuation">.</span><span class="token function">component</span><span class="token punctuation">(</span><span class="token string">'todo-item'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
  props<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'todo'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
  template<span class="token operator">:</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string"><span class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">&gt;</span></span><span class="token interpolation"><span class="token punctuation">{{</span><span class="token inline-js language-js"> todo<span class="token punctuation">.</span>text </span><span class="token punctuation">}}</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span></span></span><span class="token template-punctuation string">`</span></span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>

app<span class="token punctuation">.</span><span class="token function">mount</span><span class="token punctuation">(</span><span class="token string">'#todo-list-app'</span><span class="token punctuation">)</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br></div></div><p data-theme-id="39028" data-preview="true" data-editable="true" data-height="300" data-default-tab="result" data-user="Vue" data-slug-hash="VwLxeEz" data-pen-title="Intro-Components-1" class="codepen" style="height:300px;"><span>See the Pen <a href="javascript:;">Intro-Components-1</a>
  by Vue (<a href="javascript:;">@Vue</a>)
  on <a href="javascript:;">CodePen</a>.</span></p> <p>이것은 인위적으로 만든 예시이지만, 우리는 앱을 두 개의 더 작은 단위로 나눌 수 있었고, 자식을 props 인터페이스를 통하여 부모로부터 합리적인 수준으로 분리할 수 있었습니다. 이제 앞으로는 부모 앱에 영향을 주지 않으면서  <code>&lt;todo-item&gt;</code> 컴포넌트를 더 복잡한 템플릿과 로직으로 더욱 향상시킬 수 있을 것입니다.</p> <p>대규모 애플리케이션에서는 개발을 보다 쉽게 관리 할 수 있도록 전체 앱을 컴포넌트로 나누는 것이 필수적입니다. <a href="javascript:;">나중에 나올 가이드</a> 에서 컴포넌트에 대해 자세히 설명하겠지만 여기서는 컴포넌트를 사용한 앱의 모습이 어떻게 구성될지에 대한 (가상의) 예를 작성하겠습니다.</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>app<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>app-nav</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>app-nav</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>app-view</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>app-sidebar</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>app-sidebar</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>app-content</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>app-content</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>app-view</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><h3 id="사용자-정의-엘리먼트와의-관계"><a href="#사용자-정의-엘리먼트와의-관계" class="header-anchor">#</a> 사용자 정의 엘리먼트와의 관계</h3> <p>Vue 컴포넌트는 <a href="javascript:;" target="_blank" rel="noopener noreferrer">Web Components 표준<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> 의 일부인 <em><strong>Custom Elements</strong></em> 와 매우 유사하다는 것을 눈치 챘을 수 있습니다. Vue의 컴포넌트 구문은 스펙 이후 느슨하게 모델링 되었기 때문입니다. 예를 들어 Vue 컴포넌트는 <a href="javascript:;" target="_blank" rel="noopener noreferrer">Slot API<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> 와 <code>is</code> 특수 속성을 구현합니다. 그러나 몇가지 중요한 차이가 있습니다.</p> <ol><li><p>Web Components Spec은 최종안이 정해졌지만 모든 브라우저들이 기본적으로 구현되는 것은 아닙니다. 현재 사파리 10.1+, 크롬 54+ 그리고 파이어폭스 63+ 기본적으로 Web Components를 지원합니다. 이에 비해 Vue 컴포넌트는 지원되는 모든 브라우저 (IE11과 호환되거나 그 이상버젼)에서 일관되게 작동합니다. 필요한 경우 Vue 컴포넌트는 기본 사용자 정의 엘리먼트 내에 래핑할 수 있습니다</p></li> <li><p>Vue 컴포넌트는 컴포넌트간 데이터의 흐름을 비롯해, 사용자 정의 이벤트와 통신, 빌드 도구와의 통합 등 기본 사용자 지정 엘리먼트에서 사용할 수 없었던 중요한 기능을 제공합니다.</p></li></ol> <p>Vue는 내부적으로 사용자 정의 엘리먼트를 사용하지 않지만, 사용자 정의 엘리먼트로 사용 또는 배포하는 경우에는 <a href="javascript:;" target="_blank" rel="noopener noreferrer">뛰어난 상호운영성<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>  을 가집니다. Vue CLI는 자기자신을 네이티브 커스텀 엘리먼트로서 등록하는 Vue 컴포넌트의 빌드도 지원하고 있습니다.</p> <h2 id="더-하실-준비가-되셨나요"><a href="#더-하실-준비가-되셨나요" class="header-anchor">#</a> 더 하실 준비가 되셨나요?</h2> <p>우리는 Vue.js 코어의 가장 기본적인 기능을 간략하게 소개했습니다. 이 가이드의 나머지 부분에서 더 자세한 세부 내용이 포함된 다른 고급 기능에 대해 다룰 예정이므로 꼭 읽어보시기 바랍니다.</p></div> <footer class="page-edit" data-v-24e048ac=""><div class="container" data-v-24e048ac=""><p data-v-24e048ac="">
      Deployed on
      <a href="javascript:;" data-v-24e048ac="">Netlify</a>.
      <!----> <br data-v-24e048ac=""> <span class="prefix" data-v-24e048ac="">Last updated:</span> <span class="time" data-v-24e048ac="">2021-01-13, 05:23:36 UTC</span></p></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
      ←
      <a href="javascript:;" class="prev">설치방법</a></span> <span class="next"><a href="javascript:;">어플리케이션 &amp; 컴포넌트 인스턴스</a>
      →
    </span></p></div> <!----> </main></div><div class="global-ui"><!----></div></div>
    <script src="static/js/app.65092beb.js" defer=""></script><script src="static/js/11.cc09171a.js" defer=""></script><script src="static/js/113.e4f60a64.js" defer=""></script><script src="static/js/24.cf678de6.js" defer=""></script><script src="static/js/19.67341cf7.js" defer=""></script><script src="static/js/17.815dd40f.js" defer=""></script><script src="static/js/22.d9d3e29a.js" defer=""></script>
  </body>
</html>
